<template>
  <v-container v-wechat-title="this.groupinfo[0].name">
    <v-breadcrumbs :items="bread" large>
      <template v-slot:divider>
        <v-icon>mdi-chevron-right</v-icon>
      </template>
    </v-breadcrumbs>
    <v-container fluid>
      <v-row align="stretch" justify="space-around" no-gutters dense>
        <v-col cols="9">
          <v-card :elevation="12" class="ma-4">
            <v-card :elevation="8">
              <div id="video" ref="videowindow">
                <div v-if="ifpoptext" id="poptextdiv" ref="poptextdiv"></div>
                <transition name="scale-transition">
                  <div v-if="loading" id="loading">
                    <v-row class="fill-height ma-0" align="center" justify="center">
                      <v-progress-circular indeterminate color="primary" :size="70" :width="7"></v-progress-circular>
                    </v-row>
                  </div>
                </transition>
                <transition name="scale-transition">
                  <div v-if="!ifpause&&!loading" id="ifpause" @click="play">
                    <v-row class="fill-height ma-0" align="center" justify="center">
                      <v-icon color="primary" size="80px">mdi-play-circle</v-icon>
                    </v-row>
                  </div>
                </transition>
                <video
                  :src="this.initVideo.url"
                  width="100%"
                  height="100%"
                  preload="auto"
                  ref="video"
                  @play="onPlayerPlay($event)"
                  @pause="onPlayerPause($event)"
                  @statechanged="playerStateChanged($event)"
                  @canplay="onPlayerCanplay($event)"
                  @error="onError($event)"
                  @timeupdate="videoTimeUpdate"
                  @click="play"
                  @loadedmetadata="getVideoLength"
                  @ended="onended($event)"
                  @loading="onloadeddata($event)"
                >
                  请更换现代浏览器
                  <!-- <track
                    v-id="ifcctext"
                    kind="subtitles"
                    src="/static/testcc.vtt"
                    srclang="zh"
                    label="简体中文"
                    default
                  />-->
                  <!-- 字幕系统 -->
                </video>
                <transition name="scroll-y-reverse-transition">
                  <div id="control" ref="control" :style="controlshow">
                    <v-slider
                      class="timeline"
                      dense
                      :max="initVideo.videoLength"
                      v-model="initVideo.currentTime"
                      @change="changeVideoTime"
                    ></v-slider>
                    <v-row>
                      <v-btn class="pa-1 ml-4 mt-1" icon @click="play">
                        <v-icon v-if="playState === 'play'" color="white">mdi-play</v-icon>
                        <v-icon v-else-if="playState === 'pause'" color="white">mdi-pause</v-icon>
                        <v-icon v-else-if="playState === 'replay'" color="white">mdi-replay</v-icon>
                      </v-btn>
                      <div
                        class="pa-1 ml-4 mt-1 white--text"
                      >{{initVideo.currentTime | videoTime}} | {{initVideo.videoLength | videoTime}}</div>
                      <v-text-field
                        v-model="sendertext"
                        :disabled="!this.$cookies.isKey('user')"
                        solo-inverted
                        rounded
                        :label="$t('message.poptext')"
                        color="white"
                        dense
                        dark
                        full-width
                        @focus="senderfocused"
                      ></v-text-field>
                      <v-btn class="pa-1 mr-1 ml-2 mt-1" icon @click="pushpoptext">
                        <v-icon color="white">mdi-send</v-icon>
                      </v-btn>
                      <v-btn
                        class="pa-1 mr-1 ml-2 mt-1"
                        icon
                        @click="showpoptextsetting=!showpoptextsetting,showvolume=false,showsendersetting=false"
                      >
                        <v-icon color="white">mdi-format-font</v-icon>
                      </v-btn>
                      <transition name="scroll-y-reverse-transition">
                        <v-card
                          dark
                          v-if="showsendersetting"
                          min-width="250px"
                          id="sendersetting"
                          class="pl-5 pr-5 pt-1 pb-1"
                        >
                          <v-row>
                            <v-color-picker v-model="colorpicker" mode="HEX"></v-color-picker>
                          </v-row>
                          <v-row>
                            <v-switch v-model="isrow" color="primary" label="滚动弹幕"></v-switch>
                          </v-row>
                          <v-row>预览：</v-row>
                          <v-row>
                            <p id="textpre" class="title center">效果预览</p>
                            <br />
                            <br />
                          </v-row>
                        </v-card>
                      </transition>
                      <transition name="scroll-y-reverse-transition">
                        <v-card
                          dark
                          v-if="showpoptextsetting"
                          min-width="250px"
                          id="poptextsetting"
                          class="pl-5 pr-5 pt-4 pb-1"
                        >
                          <v-slider
                            color="primary"
                            label="弹幕屏占比:"
                            v-model="channelmax"
                            z-index="10"
                            thumb-label
                            dense
                            max="60"
                            min="1"
                          ></v-slider>
                          <v-slider
                            color="primary"
                            label="弹幕透明度:"
                            v-model="poptextop"
                            z-index="10"
                            thumb-label
                            dense
                            max="100"
                            min="0"
                          ></v-slider>
                          <v-switch v-model="allowoverwrite" color="primary" label="允许溢出"></v-switch>
                        </v-card>
                      </transition>
                      <v-btn
                        class="pa-1 mr-1 ml-2 mt-1"
                        icon
                        @click="ifpoptext=!ifpoptext,showvolume=false,showpoptextsetting=false,showsendersetting=false"
                      >
                        <v-icon v-if="ifpoptext" color="white">mdi-message-bulleted</v-icon>
                        <v-icon v-else color="white">mdi-message-bulleted-off</v-icon>
                      </v-btn>
                      <v-btn
                        class="pa-1 mr-2 ml-2 mt-1"
                        icon
                        @click="showvolume=!showvolume,showpoptextsetting=false,showsendersetting=false"
                      >
                        <v-icon v-if="volume>=70" color="white">mdi-volume-high</v-icon>
                        <v-icon v-if="volume>=40&&volume<70" color="white">mdi-volume-medium</v-icon>
                        <v-icon v-if="volume>0&&volume<40" color="white">mdi-volume-low</v-icon>
                        <v-icon v-if="volume==0" color="white">mdi-volume-mute</v-icon>
                      </v-btn>
                      <transition name="scroll-y-reverse-transition">
                        <v-card v-if="showvolume" id="volume">
                          <v-row>
                            <v-col cols="12">
                              <v-slider
                                v-model="volume"
                                z-index="10"
                                thumb-label
                                @input="changevolume"
                                @change="closevolume"
                                dense
                                vertical
                                max="100"
                                min="0"
                              ></v-slider>
                            </v-col>
                          </v-row>
                        </v-card>
                      </transition>

                      <v-btn class="pa-1 mr-4 mt-1" icon @click="fullScreen">
                        <v-icon v-if="!fullscreen" color="white">mdi-fullscreen</v-icon>
                        <v-icon v-else color="white">mdi-fullscreen-exit</v-icon>
                      </v-btn>
                    </v-row>
                  </div>
                </transition>
              </div>
              <v-card>
                <v-card-actions>
                  <v-icon large>mdi-play</v-icon>
                  <span>{{$t("message.played")+' '+groupinfo[0].played}}</span>
                  <v-icon class="ml-4" large>mdi-star-face</v-icon>
                  <span>{{$t("message.favored")+' '+groupinfo[0].favor}}</span>
                </v-card-actions>
                <v-divider></v-divider>
                <v-card-title>
                  <router-link :to="{name:'space',query:{uid:uperinfo.uid}}">
                    <v-avatar size="62" class="ml-5 mr-5">
                      <v-img :src="uperinfo.img">
                        <template v-slot:placeholder>
                          <v-row class="fill-height ma-0" align="center" justify="center">
                            <v-progress-circular indeterminate color="primary"></v-progress-circular>
                          </v-row>
                        </template>
                      </v-img>
                    </v-avatar>
                  </router-link>
                  {{uperinfo.name}}
                  <br />
                  {{groupinfo[0].name}}
                </v-card-title>

                <v-card-text>{{groupinfo[0].text}}</v-card-text>
                <v-btn
                  @click="deletefavor"
                  v-if="favored"
                  fab
                  color="primary"
                  absolute
                  buttom
                  right
                >
                  <v-icon>mdi-star</v-icon>
                </v-btn>
                <v-btn @click="onFavor" v-else fab color="primary" absolute buttom right>
                  <v-icon>mdi-star-outline</v-icon>
                </v-btn>
                <v-divider></v-divider>
                <v-card-text>
                  {{$t("message.grouptags")}}
                  <v-chip-group column>
                    <v-chip v-for="tag in JSON.parse(groupinfo[0].tag)" :key="tag">{{ tag }}</v-chip>
                  </v-chip-group>
                </v-card-text>
              </v-card>
              <v-card></v-card>
            </v-card>
            <!--评论-->
            <v-card-text class="display-1">{{$t("message.comm")}}</v-card-text>
            
            <v-col cols=12>
              <v-card flat>
              <v-textarea
                    rounded
                    prepend-icon="mdi-comment-text-outline"
                    v-model="Ctext"
                    label="在这里写下你的感受"
                    color="primary"
                    required
                    outlined
                  ></v-textarea>
                  <v-btn absolute color="primary" bottom right fab @click="onComm">
                        <v-icon color="white">mdi-send</v-icon>
                        
                      </v-btn>
              </v-card>
            </v-col>
            
            <v-col v-for="(co,index) in comm" :key="co" cols=12>
              <v-card>
                <v-row>
                <v-col cols=2 class="text-center">
              <router-link :to="{name:'space',query:{uid:co.uid}}">
                    <v-avatar size="62" class="ml-5 mr-5">
                      <v-img :src="co.img">
                        <template v-slot:placeholder>
                          <v-row class="fill-height ma-0" align="center" justify="center">
                            <v-progress-circular indeterminate color="primary"></v-progress-circular>
                          </v-row>
                        </template>
                      </v-img>
                    </v-avatar>
                  </router-link>
                  <p class="text-center mt-2">{{co.name}}</p>
                </v-col>
                <v-col cols=10>
                  
                  <v-card-text class="pa-1">{{co.text}}</v-card-text>
                  <v-card-action class="pa-2">
                  
                  
                  <v-btn v-if="co.liked=='yes'" absolute right bottom fab  @click="onDislike(co.cid,index)" ><v-icon color="primary">mdi-thumb-up</v-icon>{{co.likes}}</v-btn>
                  <v-btn v-else absolute right bottom fab @click="onLike(co.cid,index)" ><v-icon >mdi-thumb-up-outline</v-icon>{{co.likes}}</v-btn>
                  
                </v-card-action>
                </v-col>
                </v-row>
                
              </v-card>
            </v-col>
            </v-card>
        </v-col>

        <v-col cols="3">
          <v-card class="mt-2">
            <v-card-title>{{$t("message.playlist")}}</v-card-title>

            <v-container>
              <v-row>
                <v-col cols="4" v-for="count in playindex" :key="count">
                  <router-link :to="{name:'group',query:{gid:$route.query.gid,index:count}}">
                    <v-card v-if="count==$route.query.index" color="primary" dark>
                      <v-card-text class="title text-center">{{count}}</v-card-text>
                    </v-card>
                    <v-card v-else>
                      <v-card-text class="text-center">{{count}}</v-card-text>
                    </v-card>
                  </router-link>
                </v-col>
              </v-row>
            </v-container>
          </v-card>
          <v-card class="mt-2">
            <v-card-title>{{$t("message.recommendlist")}}</v-card-title>
            <v-row>
              <v-col cols="12">
                <v-hover
                  v-slot:default="{ hover }"
                  v-for="card in cards"
                  :key="card"
                  flex
                  class="ml-1 mr-1 mt-4 mb-4"
                >
                  <v-card :elevation="hover ? 15 : 2" id="card" class="ml-2 mr-2">
                    <v-hover v-slot:default="{ hover }">
                      <v-img class="white--text" height="200px" :src="card.pic">
                        <v-expand-transition>
                          <div
                            v-if="hover"
                            class="d-flex transition-fast-in-fast-out black darken-4 v-card--reveal title white--text"
                            style="height: 100%;"
                          >
                            <p class="pa-4">{{card.text}}</p>
                          </div>
                        </v-expand-transition>
                        <template v-slot:placeholder>
                          <v-row class="fill-height ma-0" align="center" justify="center">
                            <v-progress-circular indeterminate color="primary"></v-progress-circular>
                          </v-row>
                        </template>
                      </v-img>
                    </v-hover>
                    <v-card-text class="title pt-4" style="position: relative;">
                      <router-link :to="{name:'group',query:{gid:card.gid,index:1}}">
                        <v-btn absolute color="primary" class="white--text" fab large right top>
                          <v-icon>mdi-play</v-icon>
                        </v-btn>
                      </router-link>
                      <p class="text-truncate">{{card.name}}</p>
                    </v-card-text>
                    <v-card-actions>
                      <v-tooltip bottom>
                        <template v-slot:activator="{ on }">
                          <v-icon v-on="on">mdi-play</v-icon>
                        </template>
                        <span>播放量</span>
                      </v-tooltip>
                      <v-text>{{card.played}}</v-text>
                      <v-tooltip bottom>
                        <template v-slot:activator="{ on }">
                          <v-icon class="ml-4" v-on="on">mdi-star-face</v-icon>
                        </template>
                        <span>收藏</span>
                      </v-tooltip>
                      <v-text class="ml-2">{{card.favor}}</v-text>
                      <v-spacer></v-spacer>
                    </v-card-actions>
                  </v-card>
                </v-hover>

              </v-col>
            </v-row>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
    <v-row></v-row>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    Ctext:'',
    comm:[],
    uperinfo: null,
    cards: [],
    favored: false,
    groupinfo: [],
    playindex: 8,
    colorpicker: "#FFFFFF",
    isrow: true,
    sendertext: "",
    showsendersetting: false,
    poptextop: 0,
    showpoptextsetting: false,
    allowoverwrite: true, //允许弹幕溢出覆盖
    channelmax: 40, //最大弹道数
    channelrow: 40, //目前滚动弹道数
    channeltop: 40, //目前竖直固定弹道数
    timenow: "", //现在的时间
    ifpoptext: true,
    ifcctext: true,
    ifpause: false,
    controlshow: "opacity:1",
    showvolume: false,
    loading: true,
    volume: 100,
    src: "",
    playState: "play",
    haserror: "",
    fullscreen: null,
    initVideo: {
      play: false, //播放还是暂停 true播放中
      videoLength: 0, //时长
      url: "", //视频课件Url
      currentTime: 0, //当前播放时间
      lastTime: null, //标记时间戳
      name: ""
    },
    bread: [
      {
        text: "主页",
        disabled: false,
        href: "/"
      },
      {
        text: "视频标题",
        disabled: true
      }
    ],

    params: "",
    poptexttest: ""
  }),
  components: {},
  methods: {
    onComm(){
      var params = new URLSearchParams();
      params.append("color", this.$route.query.gid); 
       params.append("text", this.Ctext); 
       params.append("time", this.$cookies.get("user"));//你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/addcomm.php",
        data: params
      })
        .then(response => {
          if(response.data=="success"){
            this.Ctext='';
            this.initcomm();
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    onDislike(cid,i){
      var params = new URLSearchParams();
      params.append("cid", cid); 
       params.append("uid", this.$cookies.get("user"));//你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/dislike.php",
        data: params
      })
        .then(response => {
          if(response.data=="success"){
            this.comm[i].liked="no";
            this.comm[i].likes--;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    onLike(cid,i){
      var params = new URLSearchParams();
      params.append("cid", cid); 
       params.append("uid", this.$cookies.get("user"));//你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/addlike.php",
        data: params
      })
        .then(response => {
          if(response.data=="success"){
            this.comm[i].liked="yes";
            this.comm[i].likes++;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    initcomm(){
      var params = new URLSearchParams();
      params.append("gid", this.$route.query.gid); 
       params.append("uid", this.$cookies.get("user"));//你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/fetchcomm.php",
        data: params
      })
        .then(response => {
          this.comm=response.data;
          
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    //推荐算法
    initcard() {
      var thistag = this.groupinfo[0].tag;
      var params = new URLSearchParams();
      params.append("gid", this.$route.query.gid);
      params.append("uid", this.$cookies.get("user")); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/showallvideos.php",
        data: params
      }).then(response => {
        var allvideo = response.data;
        var tagcache = [];
        var commgid = new Array();
        var cache = new Array();
        for (var i = 0; i < allvideo.length; i++) {
          var li = allvideo[1];
          var row = {};
          row.gid = i;
          row.sim = this.similar(thistag, allvideo[i].tag);
          tagcache.push(row);
        }
        //console.log(tagcache);
        //tagsim=tagsim.sort();
        for (var i = 0; i < tagcache.length; i++) {
          cache.push(tagcache[i].sim);
        }
        cache = cache.sort();
        for (var i = cache.length - 1; i > cache.length - 9; i--) {
          for (var j = 0; j < tagcache.length; j++) {
            if (cache[i] == tagcache[j].sim) {
              commgid.push(tagcache[j].gid);
              //console.log(commgid);
            }
          }
        }
        var arr2 = [];
        console.log(tagcache);
        this.addcard(7, commgid, 0, arr2);
        //console.log(this.cards)
      });
    },
    //相似度比较
    similar(s, t, f) {
      if (!s || !t) {
        return 0;
      }
      var l = s.length > t.length ? s.length : t.length;
      var n = s.length;
      var m = t.length;
      var d = [];
      f = f || 3;
      var min = function(a, b, c) {
        return a < b ? (a < c ? a : c) : b < c ? b : c;
      };
      var i, j, si, tj, cost;
      if (n === 0) return m;
      if (m === 0) return n;
      for (i = 0; i <= n; i++) {
        d[i] = [];
        d[i][0] = i;
      }
      for (j = 0; j <= m; j++) {
        d[0][j] = j;
      }
      for (i = 1; i <= n; i++) {
        si = s.charAt(i - 1);
        for (j = 1; j <= m; j++) {
          tj = t.charAt(j - 1);
          if (si === tj) {
            cost = 0;
          } else {
            cost = 1;
          }
          d[i][j] = min(
            d[i - 1][j] + 1,
            d[i][j - 1] + 1,
            d[i - 1][j - 1] + cost
          );
        }
      }
      let res = 1 - d[n][m] / l;
      return res.toFixed(f);
    },
    jsonisEmpty(jsonObject) {
      var isEmpty = true;
      for (var prop in jsonObject) {
        isEmpty = false;
        break;
      }

      return isEmpty;
    },
    addcard(i, arr, imin, arr2) {
      console.log(arr[i]);
      var params = new URLSearchParams();
      params.append("gid", arr[i]); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/getgroupinfo.php",
        data: params
      })
        .then(response => {
          console.log(this.jsonisEmpty(response.data));
          if (this.jsonisEmpty(response.data)) {
            i--;
            if (i < imin) {
              this.cards = arr2;
              return;
            } else {
              return this.addcard(i, arr, imin, arr2);
            }
          } else {
            var row = {};
            //console.log(response.data[0].name)
            row.name = response.data[0].name;
            row.text = response.data[0].text;
            row.played = response.data[0].played;
            row.favor = response.data[0].favor;
            row.pic = response.data[0].pic;
            row.gid = arr[i];
            arr2.push(row);
            console.log(arr2);
            i--;
            if (i < imin) {
              this.cards = arr2;
              return;
            } else {
              return this.addcard(i, arr, imin, arr2);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    deletefavor() {
      var params = new URLSearchParams();
      params.append("gid", this.$route.query.gid);
      params.append("uid", this.$cookies.get("user")); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/deletefavor.php",
        data: params
      })
        .then(response => {
          if (response.data == 0) {
            this.favored = false;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    onFavor() {
      var params = new URLSearchParams();
      params.append("gid", this.$route.query.gid);
      params.append("uid", this.$cookies.get("user")); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/onFavor.php",
        data: params
      })
        .then(response => {
          if (response.data == 0) {
            this.favored = true;
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    play() {
      this.showsendersetting = false;
      this.showvolume = false;
      this.showpoptextsetting = false;
      //播放视频
      if (this.initVideo.play) {
        this.playState = "play";
        this.ifpause = false;
        this.$refs.video.pause();
      } else {
        Math.abs(this.initVideo.currentTime - this.$refs.video.currentTime) > 2
          ? (this.$refs.video.currentTime = this.initVideo.currentTime)
          : "";
        this.ifpause = true;
        this.$refs.video.play();
        this.playState = "pause";
      }
    },
    onError(e) {
      this.haserror = false;
      if (this.src != "") {
        this.playState = "replay";
        this.haserror = true;
      }
    },
    onPlayerCanplay(event) {
      this.haserror = false;
      this.loading = false;
    },
    onPlayerPlay(event) {
      this.playState = "pause";
      this.initVideo.play = true;
      this.controlshow = " ";
    },
    onPlayerPause(event) {
      this.playState = "play";
      this.initVideo.play = false;
      this.controlshow = "opacity:1;";
    },
    fullScreen() {
      this.showsendersetting = false;
      this.showvolume = false;
      this.showpoptextsetting = false;
      if (this.isFullscreen()) {
        document.webkitExitFullscreen();
      } else {
        this.$refs.videowindow.webkitRequestFullScreen();
        this.$refs.control.webkitRequestFullScreen();
        this.$refs.volume.webkitRequestFullScreen();
      }
    },
    isFullscreen() {
      return (
        document.fullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        false
      );
    },
    videoTimeUpdate() {
      //更新视频时间。节流，每秒触发一次
      let nowTime = Date.now();
      let gapTime = 1000;
      this.timenow = this.videoTime1(this.$refs.video.currentTime);

      if (
        !this.initVideo.lastTime ||
        nowTime - this.initVideo.lastTime > gapTime
      ) {
        if (this.$refs.video) {
          let time = this.$refs.video.currentTime;
          this.initVideo.currentTime = time;
        }
        this.initVideo.lastTime = nowTime;
      }
    },
    changeVideoTime(val) {
      //改变视频时间
      if (this.$refs.video) {
        this.$refs.video.currentTime = val;
      }
    },
    getVideoLength() {
      //获取音视频时长 1音频 2视频
      this.initVideo.videoLength = this.$refs.video.duration;
    },
    handPlay(status) {
      //音视频播放暂停 type:1 音频 2视频 status 1播放 2暂停

      status == 1
        ? (this.initVideo.play = true)
        : (this.initVideo.play = false);
    },
    ended(event) {
      this.play();
    },
    loading(event) {
      this.loading = true;
    },
    changevolume() {
      this.$refs.video.volume = this.volume / 100;
    },
    // mouseOver(){
    //   this.controlshow="opacity: 1;"
    // },
    // mouseLeave(){
    //   this.controlshow="opacity: 0;"
    // }
    closevolume() {
      this.showvolume = false;
    },

    videoTime1(value) {
      var s = Number(value); //时间转换

      s = Math.floor(s);
      //console.log(s);
      var m = s / 60;
      m = Math.floor(m);
      //console.log(m);
      s = s % 60;
      if (s < 10) {
        s = String("0" + String(s));
      } else if (10 <= s && s < 60) {
        s = String(s);
      } else {
        s = String(s);
      }

      return m + ":" + s;
    },
    poptextCreater(type, channel, color, text) {
      if (type == "row") {
        console.log(text);
        var poptextspan = document.createElement("span");
        var content = document.createTextNode(text);
        poptextspan.style.fontSize = "20px";
        poptextspan.style.color = color;
        poptextspan.style.textAlign = "left";
        poptextspan.style.position = "absolute";
        poptextspan.style.top = String((this.channelmax - channel) * 22) + "px";
        poptextspan.style.textShadow = "-2px 2px #000";
        poptextspan.style.whiteSpace = "nowrap";
        poptextspan.classList.add("start");
        poptextspan.style.animation =
          "mov " + String(40 - text.length * 0.2) + "s";
        poptextspan.style.animationPlayState = "paused";
        poptextspan.appendChild(content);
        document.getElementById("poptextdiv").appendChild(poptextspan);
        this.channelrow--;
        var t1 = setInterval(() => {
          if (this.ifpause) {
            if (poptextspan.style.animationPlayState == "paused") {
              console.log("running");
              poptextspan.style.animationPlayState = "running";
            }
          } else {
            if (poptextspan.style.animationPlayState == "running") {
              poptextspan.style.animationPlayState = "paused";
            }
          }
        }, 100);
        poptextspan.addEventListener("animationend", () => {
          clearInterval(t1);
          document.getElementById("poptextdiv").removeChild(poptextspan);
        });
      } else {
        var poptextspan = document.createElement("span");
        var content = document.createTextNode(text);
        poptextspan.style.color = color;
        poptextspan.style.position = "absolute";
        poptextspan.style.fontSize = "20px";
        poptextspan.style.textAlign = "center";
        poptextspan.style.width = "100%";
        poptextspan.style.textShadow = "-2px 2px #000";
        poptextspan.style.top = String((this.channelmax - channel) * 22) + "px";
        poptextspan.appendChild(content);
        document.getElementById("poptextdiv").appendChild(poptextspan);
        this.channeltop--;
        var nowtime = this.$refs.video.currentTime + 5;
        //console.log(nowtime);
        var t1 = window.setInterval(() => {
          if (this.$refs.video.currentTime > nowtime) {
            document.getElementById("poptextdiv").removeChild(poptextspan);
            clearInterval(t1);
          }
        }, 100);
        //计时器，设定5s后删除此时间点的弹幕
      }
    },
    senderfocused() {
      if (this.initVideo.play) {
        this.play();
      } else {
        this.showvolume = false;
        this.showpoptextsetting = false;
      }
      this.showsendersetting = true;
    },
    pushpoptext() {
      if (this.isrow) {
        var type = "row";
        var channel = this.channelrow;
      } else {
        var type = "top";
        var channel = this.channeltop;
      }
      var color = this.colorpicker;
      var text = this.sendertext;
      if (text != "") {
        this.sendertext = "";
        this.showsendersetting = false;
        var params = new URLSearchParams();
        var time = this.timenow;
        params.append("gid", this.$route.query.gid);
        params.append("index", this.$route.query.index);
        params.append("uid", this.$cookies.get("user"));
        params.append("color", color);
        params.append("text", text);
        params.append("type", type);
        params.append("time", time); //你要传给后台的参数值 key/value
        this.$axios({
          method: "post",
          url: "http://47.100.35.226/php/addpoptext.php",
          data: params
        })
          .then(response => {
            if (type == "row") {
              console.log(text);
              var poptextspan1 = document.createElement("span");
              var content = document.createTextNode(text);
              poptextspan1.style.border = "2px solid #ff0000";
              poptextspan1.style.fontSize = "20px";
              poptextspan1.style.color = color;
              poptextspan1.style.textAlign = "left";
              poptextspan1.style.position = "absolute";
              poptextspan1.style.top =
                String((this.channelmax - channel) * 22) + "px";
              poptextspan1.style.textShadow = "-2px 2px #000";
              poptextspan1.style.whiteSpace = "nowrap";
              poptextspan1.classList.add("start");
              poptextspan1.style.animation =
                "mov " + String(40 - text.length * 0.2) + "s";
              poptextspan1.style.animationPlayState = "paused";
              poptextspan1.appendChild(content);
              document.getElementById("poptextdiv").appendChild(poptextspan1);
              this.channelrow--;
              var t2 = setInterval(() => {
                if (this.ifpause) {
                  if (poptextspan1.style.animationPlayState == "paused") {
                    //console.log("running");
                    poptextspan1.style.animationPlayState = "running";
                  }
                } else {
                  if (poptextspan1.style.animationPlayState == "running") {
                    poptextspan1.style.animationPlayState = "paused";
                  }
                }
              }, 100);
              poptextspan1.addEventListener("animationend", () => {
                clearInterval(t2);
                document.getElementById("poptextdiv").removeChild(poptextspan1);
              });
            } else {
              var poptextspan1 = document.createElement("span");
              var content = document.createTextNode(text);
              poptextspan1.style.color = color;
              poptextspan1.style.position = "absolute";
              poptextspan1.style.fontSize = "20px";
              poptextspan1.style.textAlign = "center";
              poptextspan1.style.width = "100%";
              poptextspan1.style.textShadow = "-2px 2px #000";
              poptextspan1.style.top =
                String((this.channelmax - channel) * 22) + "px";
              poptextspan1.appendChild(content);
              document.getElementById("poptextdiv").appendChild(poptextspan1);
              this.channelrtop--;
              var nowtime = this.$refs.video.currentTime + 5;
              //console.log(nowtime);
              var t2 = window.setInterval(() => {
                if (this.$refs.video.currentTime > nowtime) {
                  document
                    .getElementById("poptextdiv")
                    .removeChild(poptextspan1);
                  clearInterval(t2);
                }
              }, 100);
              //计时器，设定5s后删除此时间点的弹幕
            }
          })
          .catch(function(error) {
            console.log(error);
          });
      } else {
      }
    },
    userhistoryplus() {
      var params = new URLSearchParams();
      params.append("gid", this.$route.query.gid);
      params.append("uid", this.$cookies.get("user")); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/userhistoryplus.php",
        data: params
      })
        .then(response => {})
        .catch(function(error) {
          console.log(error);
        });
    },
    init() {
      this.initcomm();
      var params = new URLSearchParams();
      params.append("gid", this.$route.query.gid); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/getplaylist.php",
        data: params
      })
        .then(response => {
          this.playindex = response.data;
          
        })
        .catch(function(error) {
          console.log(error);
        });
      var params = new URLSearchParams();
      params.append("gid", this.$route.query.gid); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/getgroupinfo.php",
        data: params
      })
        .then(response => {
          this.groupinfo = response.data;
          this.initcard();
          console.log(this.groupinfo[0].name);
          this.bread[1].text = this.groupinfo[0].name;
          var loginBean = new URLSearchParams();
          loginBean.append("fetchUserBean.uid", this.groupinfo[0].uid); //你要传给后台的参数值 key/value
          this.$axios({
            method: "post",
            url: "http://47.100.137.177:8080/YimooBP1.0/myfetchuser",
            data: loginBean
          })
            .then(response => {
              this.uperinfo = JSON.parse(response.data);
            })
            .catch(function(error) {
              console.log(error);
            });
        })
        .catch(function(error) {
          console.log(error);
        });
      var params = new URLSearchParams();
      params.append("gid", this.$route.query.gid);
      params.append("index", this.$route.query.index); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/playvideo.php",
        data: params
      })
        .then(response => {
          this.initVideo.url = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
      var params = new URLSearchParams();
      params.append("gid", this.$route.query.gid);
      params.append("index", this.$route.query.index); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.35.226/php/fetchpoptext.php",
        data: params
      })
        .then(response => {
          this.poptexttest = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
      if (this.$cookies.isKey("user")) {
        var params = new URLSearchParams();
        params.append("gid", this.$route.query.gid);
        params.append("uid", this.$cookies.get("user")); //你要传给后台的参数值 key/value
        this.$axios({
          method: "post",
          url: "http://47.100.35.226/php/whoFavorwhat.php",
          data: params
        })
          .then(response => {
            this.favored = response.data;
          })
          .catch(function(error) {
            console.log(error);
          });
        var loginBean = new URLSearchParams();
        loginBean.append("gid", this.$route.query.gid);
        //你要传给后台的参数值 key/value
        this.$axios({
          method: "post",
          url: "http://47.100.137.177:8080/YimooBP1.0/myplusplayed",
          data: loginBean
        })
          .then(response => {
            this.userhistoryplus();
            console.log("success");
          })
          .catch(function(error) {
            console.log(error);
          });
      }
      var loginBean = new URLSearchParams();
      loginBean.append("gid", this.$route.query.gid); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/myplusplayed",
        data: loginBean
      })
        .then(response => {
          //console.log("success")
        })
        .catch(function(error) {
          console.log(error);
        });
      this.fullscreen = setInterval(() => {
        this.fullscreen =
          document.fullscreenElement ||
          document.msFullscreenElement ||
          document.mozFullScreenElement ||
          document.webkitFullscreenElement ||
          false;
      }, 500);
    }
  },
  mounted() {},

  created() {
    this.init();
  },
  beforeCreate() {},
  watch: {
    $route(to, from) {
      // 监听路由的变化，做你想做的一些事情...
      location.reload();
    },
    timenow: function(time) {
      //弹幕池刷新
      this.channelrow = this.channelmax;
      this.channeltop = this.channelmax;
      //console.log(time);
      for (var i = 0, l = this.poptexttest.length; i < l; i++) {
        //console.log(this.poptexttest);
        if (this.poptexttest[i].time == time) {
          if (this.poptexttest[i].type == "top") {
            //判断弹幕类型
            if (this.channeltop <= 0) {
              //固定弹幕溢出判断
              if (this.allowoverwrite) {
                //判断是否允许溢出

                this.channeltop = this.channelmax;
                this.poptextCreater(
                  "top",
                  this.channeltop,
                  this.poptexttest[i].color,
                  this.poptexttest[i].text
                );
              }
            } else {
              //console.log(this.poptexttest[i].text);
              this.poptextCreater(
                "top",
                this.channeltop,
                this.poptexttest[i].color,
                this.poptexttest[i].text
              );
            }
          } else {
            if (this.channelrow <= 0) {
              if (this.allowoverwrite) {
                this.poptextCreater(
                  "row",
                  this.channelrow,
                  this.poptexttest[i].color,
                  this.poptexttest[i].text
                );
                this.channelrow = this.channelmax;
              }
            } else {
              this.poptextCreater(
                "row",
                this.channelrow,
                this.poptexttest[i].color,
                this.poptexttest[i].text
              );
            }
          }
        }
      }
    },
    poptextop: function() {
      document.getElementById("poptextdiv").style.opacity =
        parseFloat(100 - this.poptextop) * 0.01;
    },
    colorpicker: function() {
      document.getElementById("textpre").style.color = this.colorpicker;
    }
  },
  filters: {
    videoTime: function(value) {
      var s = Number(value); //时间转换

      s = Math.floor(s);
      //console.log(s);
      var m = s / 60;
      m = Math.floor(m);
      //console.log(m);
      s = s % 60;
      if (s < 10) {
        s = String("0" + String(s));
      } else if (10 <= s && s < 60) {
        s = String(s);
      } else {
        s = String(s);
      }

      return m + ":" + s;
    }
  }
};
</script>

<style>
#video {
  position: relative;
}
#control {
  opacity: 0;
  position: absolute;
  z-index: 6;
  width: 100%;
  height: 50px;
  background: linear-gradient(rgba(0, 0, 0, 0), #000);
  bottom: 0;
  transition: opacity 1s;
  -moz-transition: opacity 1s; /* Firefox 4 */
  -webkit-transition: opacity 1s; /* Safari 和 Chrome */
  -o-transition: opacity 1s; /* Opera */
}
.timeline {
  position: absolute;
  width: 100%;
  top: -20px;
}
#volume {
  z-index: 6;
  position: absolute;
  right: 65px;
  bottom: 50px;
  background: rgba(0, 0, 0, 0.5);
}
#loading {
  z-index: 6;
  position: absolute;
  width: 100%;
  height: 100%;
}
#ifpause {
  z-index: 6;
  position: absolute;
  width: 100%;
  height: 100%;
}
#poptextdiv {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#control:hover {
  opacity: 1;
}
#poptextsetting {
  z-index: 6;
  position: absolute;
  right: 50px;
  bottom: 50px;
  background: rgba(0, 0, 0, 0.5);
}
#sendersetting {
  z-index: 6;
  position: absolute;
  right: 150px;
  bottom: 50px;
  background: rgba(0, 0, 0, 0.5);
}
#textpre {
  width: 100%;
  margin: auto;
  text-align: center;
}
.start {
  animation-timing-function: linear;
  animation: mov 20s;
  -moz-animation: mov 20s; /* Firefox 4 */
  -webkit-animation: mov 20s; /* Safari 和 Chrome */
  -o-animation: mov 20s; /* Opera */
}
@keyframes mov {
  from {
    right: -200px;
  }
  to {
    right: 3000px;
  }
}

@-moz-keyframes mov /* Firefox */ {
  from {
    right: -200px;
  }
  to {
    right: 3000px;
  }
}

@-webkit-keyframes mov /* Safari 和 Chrome */ {
  from {
    right: -200px;
  }
  to {
    right: 3000px;
  }
}
@-o-keyframes mov /* Opera */ {
  from {
    right: -200px;
  }
  to {
    right: 3000px;
  }
}
</style>
